<template>
	<div>
		<nav-bar title="商品详情"></nav-bar>
		<div class="outer-swiper">
			<div class="swiper">
				<!-- 轮播图 -->
				<my-swipe></my-swipe>
			</div>
		</div>
		<div class="product-desc">
			<ul>
				<li class="product-desc-sapn">
					<span>商品标题</span>
				</li>
				<li class="price-li">
					市场价：<s>￥9999</s> 
					销售价：<span>￥5</span>
				</li>
				<li class="number-li">
					购买数量：
					<span @click="substract">-</span>
					<!-- 根据内容自适应宽度contenteditable="true" -->
					<span id="dis"></span>
					<input class="put-picknum" type="number" v-model="pickNum">
					<span @click="add">+</span>
				</li>
				<li>
					<mt-button type="primary">立即购买</mt-button>
					<mt-button type="danger" @click="insertBall">加入购物车</mt-button>
				</li>
			</ul>
		</div>

		<transition name="ball" @after-enter="afterEnter">
			<div class="ball" v-if="isExist"></div>
		</transition>
		
		<div class="product-props">
			<ul>
				<li>商品参数</li>
				<li>商品货号：12354654</li>
				<li>商品情况：999件</li>
				<li>上架时间：2019-12-09</li>
			</ul>
		</div>
		<div class="product-info">
			<ul>
				<li>
					<mt-button @click="showPhotoInfo" type="primary" size="large" plain>图文介绍</mt-button>
					<mt-button @click="goodsComment" type="danger" size="large" plain>商品评论</mt-button>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import EventBus from '@/EventBus'
import GoodsTools from '@/GoodsTools'

	export default {
		data() {
			return {
				isExist:false, // 小球移除
				goodsInfo:{}, // 商品详情信息
				pickNum:1, // 加入购物车数量
			}
		},
		created() {
 			let imgId = this.$route.params.id;
 			// 获取对应id商品信息
 			/*this.$axios.get('goodsInfo/'+imgId)
 			.then(res => {
 				this.goodsInfo = res.data.result;
 			})
 			.catch(err => console.log('商品详情获取失败',err))*/
		},
		methods: {
			add() {
				// 模拟购买商品数量超出的情况
				if(999 <= this.pickNum) return 999;
				this.pickNum ++;
			},
			substract() {
				if(this.pickNum <= 1) return 1;
				this.pickNum --
			},
			// 插入小球元素
			insertBall() {
				if(this.checkNumerPass()) {
					this.isExist = true;
				}
			},
			afterEnter() {
				this.isExist = false;
				// 通知App组件增加小球商品数量
				EventBus.$emit('addShopcart',this.pickNum);

				let goodsId = this.$route.params.id;
				// 添加到本地存储
				GoodsTools.add({
					id:goodsId,
					num:this.pickNum
				});
			},
			// 图文介绍
			showPhotoInfo() {
				// 编程导航（去哪里）
				this.$router.push({
					name:'photo.info',
					query:{
						id:this.$route.query.id 
					}
				})
			},
			// 显示商品评论
			goodsComment() {
				// 编程导航 goods.comment -> 使用评论子组件
				// 需要商品id
				this.$router.push({
					name:'goods.comment',
					query:{
						id:this.$route.params.id
					}
				})
			},
			// 检查输入数量是否合法
			checkNumerPass() {
				if( this.pickNum == null) {
					this.pickNum = 1;
					this.$toast('请输入购买数量！');
					return false;
				}
				if( this.pickNum < 1) {
					this.pickNum = 1;
					return false;
				}
				if(this.pickNum > 999) {
					this.pickNum = 999;
					return false;
				}
				return true;
			}
		}

	}
	
</script>
<style scoped>
	.ball-enter-active {
		animation: bounce-in 0.8s;
	}
	.ball-leave {
		/*元素进入后，透明度0，*整个动画都是0*/
		/*元素离开之后默认是1，所以会闪一下，设置为0*/
		opacity: 0;
	}
	@keyframes bounce-in {
		0% {
			transform: translate3d(0,0,0);
		}
		35% {
			transform: translate3d(120px,-50px,0);
		}
		45% {
			transform: translate3d(130px,-40px,0);
		}
		50% {
			transform: translate3d(140px,-30px,0);
		}
		75% {
			transform: translate3d(160px,0,0);
		}
		100% {
			transform: translate3d(120px,300px,0);
		}

	}
	.put-picknum {
		color: #66757f;
        height: 21px;
        margin: 0px -5px 0px -6px;
        min-width: 20px;
        max-width: 80px;
        text-align: center;
        display: inline-block;
		border: 1px solid rgba(0,0,0,0.2);
	}
	#dis {
	    position:absolute;
	    z-index:1000;
	    left:-500px;
	}
	.swiper {
		/*margin: 8px;
		width: 95%;*/
		border-radius: 5px;
		overflow: hidden;
		/*border: 1px solid rgba(0,0,0,0.2);*/
	}
	.outer-swiper,
	.product-desc,
	.product-props,
	.product-info {
		border-radius: 5px;
		border: 1px solid rgba(0,0,0,0.2);
		margin: 3px;
	}
	/*清ul的padding*/
	.outer-swiper ul,
	.product-desc ul,
	.product-props ul,
	.product-info ul {
		padding: 0;
		margin: 0px 0px 3px 0px;
	}
	.product-desc ul li,
	.product-props ul li,
	.product-info ul li {
		list-style: none;
		font-size: 15px;
		color: rgba(0,0,0,0.5);
		margin-top: 8px;
	}
	.product-desc ul > :nth-child(1) span {
		color: blue;
		font-size: 22px;
		font-weight: bold;
	}
	.product-desc ul > :nth-child(1) {
		border-bottom: 1px solid rgba(0,0,0,0.5);
	}
	.product-desc ul,
	.product-props ul,
	.product-info ul {
		padding-left: 10px;
	}
	.price-li span {
		color: red;
		font-size: 25px;
	}
	.price-li s {
		margin-right: 16px;
	}
	/*加减*/
	.number-li span {
		display: inline-block;
		border: 2px solid rgba(0,0,0,0.1);
		width: 25px;
	}
	/*商品参数*/
	.product-props ul > :nth-child(1) {
		text-align: left;
	}
	.product-props ul:not(:nth-child(1)) {
		margin-left: 40px;
	}
	.product-info ul {
		margin-bottom: 70px;
		padding:0.5;
	}
	.product-info li button {
		margin-bottom: 6px;
	}
	.number-li span {
		text-align: center;
	}
	.numer-li > :nth-child(2) {
		width: 40px;
	}
	.ball {
		width: 24px;
		height: 24px;
		top: 395px;
		left: 120px;
		display: inline-block;
		border-radius: 50%;
		background-color: red;
		z-index: 9999;
		position: absolute;
	}
</style>